{% extends "simpleblog/base.html" %}
{% block title %}{{article.title}} | {{base_labels.header}}{% endblock title %}
{% block sbcontent %}
<h2>{{article.title}}</h2>
<p style="font-weight:bold;">{{article.created_at}} | 
{% if article.tags.all %}
{% for tag in article.tags.all %}
<a href="{% url "simpleblog.tag" tag.url_key %}">{{tag.name}}</a>&nbsp;
{% endfor %} |
{% endif %}
<a href="#comments" style="font-weight:normal;">{{article.get_comments.count}} comments</a>
{% if user.is_authenticated %}
| <a href="/admin/simpleblog/article/{{article.pk}}/" target="blank" style="font-weight:normal">edit</a>
{% endif %}
</p>
{% if article.line_breaks_br %}
<p>{{article.content|safe|linebreaksbr}}</p>
{% else %}
<p>{{article.content|safe}}</p>
{% endif %}
<div >
    <div class="span">
        <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="http://{{base_labels.domain}}{% url "simpleblog.article" article.url_key %}"></g:plusone>
    </div>
    <div class="span">
        <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="skif-sarmat" data-url="http://{{base_labels.domain}}{% url "simpleblog.article" article.url_key %}">Tweet</a>
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </div>
    <div class="span">
        <div id="fb-root"></div>
        <script src="http://connect.facebook.net/ru_RU/all.js#appId=218617268163634&amp;xfbml=1"></script><fb:like href="http://{{base_labels.domain}}{% url "simpleblog.article" article.url_key %}" send="false" layout="box_count" width="90" show_faces="false" action="recommend" font="arial"></fb:like>
    </div>
</div>
<div >
    {% if article.gallery.all %}
    <div class="span9">
        <h3>Galleries</h3>
        {% for gallery in article.gallery.all %}
            <div >
            {% for img in gallery.image_set.all %}
                <a href="{{img.img.url}}" class="lightbox"><img src="{{img.img.url}}" class="span2" style="margin-bottom:10px;"></a>
            {% endfor %}
            </div>
        {% endfor %}
    </div>
    {% endif %}
    <div >
        <b id="comments">Comments</b>
        {% if not article.get_comments %}
            <p>No comments yet</p>
        {% endif %}
        {% for comment in article.get_comments %}
            <div >
                <div class="span">
                    <h4>{{comment.title}}</h4>
                    <p>author: <b>{{comment.author_name}}</b> | {{comment.created_at}}</p>
                    <p>{{comment.text|linebreaksbr}}</p>
                </div>
            </div>
        {% endfor %}
    </div>
    <div >
        <b>Add new comment</b>
        {# comment_form.as_p #}
        <form action="" method="post">
        {% csrf_token %}
        <div >
            <div class="span">
                <input id="id_author_name" type="text" name="author_name" maxlength="64" placeholder="* name" />
            </div>
            <div class="span">
                <input id="id_author_email" type="text" name="author_email" maxlength="64" placeholder="* email (will not be shown)"/>
            </div>
        </div>
        <div >
            <div class="span">
                <input id="id_title" type="text" name="title" maxlength="255"  placeholder="* title"/>
            </div>
        </div>
        <div >
            <div class="span">
                <textarea style="width: 600"id="id_text" rows="5" cols="40" name="text"  placeholder="comment"></textarea>
            </div>
        </div>
        <div >
            <div class="span">
                <input type="submit" value="Post comment">
            </div>
        </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="{{STATIC_URL}}simpleblog/lightbox/js/jquery.js"></script>
 <script type="text/javascript" src="{{STATIC_URL}}simpleblog/lightbox.js"></script>
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}simpleblog/lightbox/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
    $('.lightbox').lightBox({fixedNavigation:true});
});
</script>
{% endblock sbcontent %}